<template>
  <div class="pagebody">
    <HomeHeadeh />
    <div class="container">
      <!-- 导航 -->
      <div class="navigation">
        <div class="nav_font">Pharmacy Captain Homepage</div>
        <img src="@/static/images/public/right_arrow.png" class="arrow">
        <div class="nav_font">Drug name</div>
        <img src="@/static/images/public/right_arrow.png" class="arrow">
        <div class="nav_font">Q&A List Page</div>
        <img src="@/static/images/public/right_arrow.png" class="arrow">
        <div class="nav_font" style="color:#616469;">Article Title</div>
      </div>
      <div class="doctorinfocard">
        <img :src="hospitalInfo.hospitalImgPath" class="doctor_img">
        <div class="doctor_info">
          <div class="doctor_name">
            {{ hospitalInfo.hospitalEnglishName }}
          </div>
          <!-- <div class="doctor_excel">
            舍弃
          </div> -->
          <div class="hosptial_content">{{ hospitalInfo.content }}</div>
        </div>
      </div>
      <div class="content">
        <div class="left">
          <div class="doctor_detailed">
            Detailed Introduction of {{ hospitalInfo.hospitalEnglishName }}
          </div>
          <div class="doctor_content" v-html="hospitalInfo.introduce"></div>
          <div class="doctor_detailed" style="margin-top:56px;">
            Process for Overseas Medical Treatment Services
          </div>
          <div class="process">
            <div class="service_card" v-for="(item,index) in process" :key="index">
              <div class="round">
                <div class="round_round"></div>
              </div>
              <div class="index">{{ item.id }}</div>
              <div class="service_title">{{ item.title }}</div>
              <div class="service_content">{{ item.content }}</div>
            </div>
          </div>
          <understand></understand>
          <!-- <hospitalCard :hospital="hospital" style="margin-top:25px;"></hospitalCard> -->
          <doctorAppointment style="margin-top:56px;"></doctorAppointment>
          <hospitalDoctors :doctorList="doctorList" style="margin-top:56px;"></hospitalDoctors>
          <guide :japanNewslist="japanNewslist" style="margin-top:56px;"></guide>
        </div>
        <right></right>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import right from '@/components/right/right'
import understand from '@/components/seagull/understand'
import hospitalCard from '@/components/hospital/hospitalCard'
import doctorAppointment from '@/components/hospital/doctorAppointment'
import hospitalDoctors from '@/components/doctor/hospitalDoctors'
import guide from '@/components/doctor/guide'
import { getHospitalById,getDoctorList,getJapanNewslist } from '@/api/api'
export default {
  components: {
    right,
    understand,
    hospitalCard,
    doctorAppointment,
    hospitalDoctors,
    guide
  },
  async asyncData ({ app, isDev, route, store, env, params, query, req, res, redirect, error }) {
    // 获取医院详情
    let hospitalId = params.id
    let hospitalInfo = await app.$axios.get(getHospitalById + hospitalId)
    if(null == hospitalInfo.data){
      error({ statusCode: 404 })
      return
    }

    // 获取医生列表
    let doctorData = {
      "pageNum":"1",
      "pageSize":"6",
      "orderByColumn":"updateTime",
      "isAsc":"DESC"
    }
    let doctorList = await app.$axios.post(getDoctorList , doctorData)

    // 查询推荐日本看病新闻
    let japanNew = {
      "state":"1",
      "orderByColumn":"updateTime",
      "isAsc":"DESC",
      "pageNum":"1",
      "pageSize":"6",
    }
    let japanNewslist = await app.$axios.post(getJapanNewslist , japanNew)

    return{
      hospitalInfo:hospitalInfo.data,
      doctorList:doctorList.rows,
      japanNewslist:japanNewslist.rows
    }
  },
  head () {
    return {
      // tdk设置
      title: this.hospitalInfo.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.hospitalInfo.description,
        },
        {
          hid: "keywords",
          name: "keywords",
          content: this.hospitalInfo.keywords,
        },
      ],
    };
  },
  data () {
    return {
      process:[{
                "id":"01",
                "title":"Patient consultation and submission of medical records and materials",
                "content":"Including medical records, hospital records, imaging films, pathology slides, etc.Including medical records, hospital records, imaging films, pathology slides, etc."
                },
                {
                "id":"02",
                "title":"Recommend hospitals and doctors suitable for patients",
                "content":"Book an appointment with a reputable international doctor and obtain a detailed analysis report for overseas medical treatment."
                },
                {
                "id":"03",
                "title":"Writing referrals in Chinese and other languages",
                "content":"According to the requirements of the hospital, organize, edit, and translate materials. "
                },
                {
                "id":"04",
                "title":"Remote MDT (optional)",
                "content":"Some patients may require remote MDT, to determine whether it is necessary to travel abroad."
                },
                {
                "id":"05",
                "title":"Make an appointment to see a doctor.",
                "content":"Coordinate with the hospital for providing invitation letter for medical treatment, doctor's appointment letter, prepayment receipt, etc."
                },
                {
                "id":"06",
                "title":"Embassy interview, obtaining visa",
                "content":"Develop personalized visa plan, assist in preparing materials, including applying for urgent processing, etc."
                },
                {
                "id":"07",
                "title":"Flight and accommodation reservation, pre-trip guidance",
                "content":"Help patients understand the process of seeking medical treatment abroad and provide guidance for entry."
                },
                {
                "id":"08",
                "title":"Airport pickup, medical consultation and daily accompaniment translation.",
                "content":"Providing medical translation services, including medical treatment, daily life guidance, and accompanying, with years of working experience. "
                },
                {
                "id":"09",
                "title":"Airport pick-up and domestic medical follow-up",
                "content":"Translate the medical documents into Chinese, arrange regular follow-up by foreign doctors after returning to China, etc."
                }
              ],
    }
  }
}
</script>

<style lang="scss" scoped>
.pagebody{
  background-color: #FFF;
  .navigation{
    display: flex;
    justify-content: flex-start;
    padding-top: 26px;
    align-items: center;
    .nav_font{
      font-size: 12px;
      color: #8A95A2;
      line-height: 12px;
      margin-right: 8px;
    }
    .arrow{
      width: 6px;
      height: 10px;
      margin-right: 8px;
    }
  }
  .doctorinfocard{
    display: flex;
    justify-content: flex-start;
    margin-top: 60px;
    .doctor_img{
      width: 400px;
      height: 320px;
      border-radius: 8px;
    }
    .doctor_info{
      margin-left: 28px;
      .doctor_name{
        font-weight: bold;
        font-size: 40px;
        color: #2E343E;
        line-height: 40px;
      }
      .doctor_excel{
        font-weight: 400;
        font-size: 16px;
        color: #616469;
        line-height: 16px;
        margin-top: 8px;
      }
      .doctor_title{
        font-weight: bold;
        font-size: 18px;
        color: #2E343E;
        line-height: 18px;
        margin-top: 24px;
      }
      .doctor_introduce{
        font-weight: 400;
        font-size: 16px;
        color: #2E343E;
        line-height: 24px;
        margin-top: 8px;
      }
      .hosptial_content{
        font-weight: 400;
        font-size: 18px;
        color: #2E343E;
        line-height: 40px;
        margin-top: 24px;
        text-align: justify;
      }
    }
  }
  .content{
    display: flex;
    justify-content: space-between;
    margin-top: 62px;
    .left{
      padding-right: 40px;
      width: 824px;
      .doctor_detailed{
        font-weight: bold;
        font-size: 28px;
        color: #0041A3;
        line-height: 52px;
      }
      .doctor_content{
        margin-top: 40px;
      }
      .process{
        margin-top: 53px;
        .service_card{
          border-left: 1px dashed #CBD1D7;
          position: relative;
          padding: 0 0 26px 59px;
          .round{
            border-radius: 50%;
            background: #E5F1FF;
            width: 16px;
            height: 16px;
            position: absolute;
            top: -6px;
            left: -8px;
            text-align: -webkit-center;
            align-content: center;
            .round_round{
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background: #0078FF;
            }
          }
          .index{
            position: absolute;
            font-weight: bold;
            font-size: 24px;
            color: #0078FF;
            line-height: 24px;
            top: -8px;
            left: 16px;
          }
          .service_title{
            font-weight: bold;
            font-size: 18px;
            color: #2E343E;
            line-height: 10px;
          }
          .service_content{
            background: #F5F8FD;
            border-radius: 8px;
            padding: 16px 24px;
            font-weight: 400;
            font-size: 16px;
            color: #2E343E;
            line-height: 32px;
            margin-top: 20px;
          }
        }
      }
    }
  }
}
</style>